<template>
    <el-dialog v-bind="$attrs" v-model="model" draggable :close-on-click-modal="false" width="600px" :append-to-body="false"
        title="提 醒">
        <slot></slot>
        <template #footer>
            <slot name="footer">
                <el-button @click="close" v-if="['all', 'cancel', 'close'].includes(props.buttons)">
                    关 闭</el-button>
                <el-button @click="submit" v-if="['all', 'submit'].includes(props.buttons)" type="primary">
                    确 定</el-button>
            </slot>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
// 编辑对话框
import { onMounted, ref, defineOptions, Ref } from 'vue'

defineOptions({
    name: 'MkDialog'
})
// props
const props = defineProps({
    buttons: {
        type: String,
        default: "all" // all: 显示取消和确定, none: 都不显示,  close: 只显示取消,  submit: 只显示确定
    },
})

const model = defineModel()

const emit = defineEmits(['submit'])

const submit = () => {
    emit('submit')
};

const show = () => {
    model.value = true
}

const close = () => {
    model.value = false;
};

defineExpose({ show, close })
/***
使用方法: 需要提交:
<MkDialog ref="dialogRef"  @submit="submit" buttons="all" >  </MkDialog>
// 不需要提交: 
<MkDialog ref="dialogRef" buttons="submit" >   </MkDialog>

const dialogRef = ref(); // 必须通过ref显示对话框

// 显示对话框
const open = async (row: any) => {
  dialogRef.value.show();
}  
*/
</script>
